<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title>{{$data['title']}}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
   <link Rel="SHORTCUT ICON" href="@if(!empty($data)) /pc/private/img{{$data['logo']}} @else /pc/private/img/sqlogo.jpg @endif">
    <link rel="stylesheet" href="/pc/terrace/css/style.css">
    <!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/jquery-2.0.3.min.js"></script> -->  
    <script src="/pc/terrace/js/echarts.js"></script> 
    <link rel="stylesheet" type="text/css" href="/pc/terrace/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/pc/terrace/css/index.css">
    <script type="text/javascript" src="/pc/terrace/js/jquery-1.11.1.min_044d0927.js"></script>
    <style type="text/css">
      body{
         background: url("/pc/terrace/images/bg_.gif");
        /*background: url("images/1.jpg");*/
        overflow: hidden;
        }
  
     table {
       margin:0;
       padding:0;
       border-collapse: collapse;
       border-spacing: 0;
       margin: 0 auto;
     }

  table tr {
   /* border: 1px solid #ddd;*/
    padding: 5px;
  }

#tbody1 >tr > td:last-child{
	color: black;
	cursor: pointer;
}
  table th, table td {
    padding: 10px;
    text-align: center;
   
  }
table td{
     color: #87CEFF;
}
  table th {
    text-transform: uppercase;
    font-size: 1.2em;
    letter-spacing: 1px;
  }

  li{
    list-style: none;
  }
 .tishi span{
display: none;
}
  #ts:hover span {
    display: block;
  }

</style>
</head>
<body >
<div style="width: 100%;height: 100%;position: relative;">
    <!-- 地图 -->
<div class="top_slide_wrap" id="" >
        <div style="" class="top_slide_wrap_ditu">
            我们已为公众及合作伙伴提供了
            <br >
            <b id="shuzi_b"></b>
            <br>次精准报警消息
        </div>
        <div id="container" style="width: 75%;height:630px;float: right;margin-top: 70px;margin-right: 15%" >
        </div>       
</div>
<div style=" position: absolute;z-index: 10;left: 45%;  transform: translateX(-50%);font-size: 2.5em;font-weight: bold;color: white;top: 1em"><img src="@if(!empty($data)) /pc/private/img/{{$data['logo']}} @else /pc/private/img/sqlogo.jpg @endif" style="width: 40px;float: left;margin-right: 15px;margin-top: -5px;">{{$data['title']}}</div>
<!-- 全部报警消息 -->
<p style="width:500px;position: absolute; color: white; font-size: 1.2em; font-weight: bold; height: 2em; background-color: #00BFFF; left: 1%; top: 3em; box-shadow: 0 0 10px #f1f1f1; border-bottom: 0; text-align: center; line-height: 2em;">全部报警消息</p>
<div id="main" style=" width: 500px;height: 400px;position: absolute;z-index: 10;-webkit-tap-highlight-color: transparent;user-select: none;left: 1%;top: 6em;box-shadow: 0 0 10px #f1f1f1;background:rgba(255, 255, 255, 0.1);padding-top: 1em">    
</div>
            <!-- 报警类型饼图 -->
<p style="width: 602px;position: absolute;  color: white;z-index: 1 ! important; font-size: 1.2em; font-weight: bold; height: 2em; background-color: #00BFFF; left: 67%; top: 3em; box-shadow: 0 0 10px #f1f1f1; border-bottom: 0; text-align: center; line-height: 2em;">报警类型比例图</p>
<div id="echartsPie" style=" width: 600px;height: 400px;position: absolute;z-index: 10;-webkit-tap-highlight-color: transparent;user-select: none;left: 67%;top: 6em;box-shadow: 0 0 10px #f1f1f1;background:rgba(255, 255, 255, 0.1);padding-top: 1em">    
</div>
<!-- 今日报警信息 -->
 <p  id="bao" style="position: absolute;width:500px;color: white;font-size: 1.2em;font-weight: bold;height: 2em;background-color: #00BFFF;left: 1%;top: 31em;box-shadow: 0 0 10px #f1f1f1;border-bottom: 0;text-align: center;line-height: 2em;">今日报警信息</p>
<div style="text-align:center;position: absolute; box-shadow: 0 0 10px #f1f1f1;color: white;left: 1%; width: 500PX;height:21em;background:rgba(255, 255, 255, 0.1);top:39.8em"> 
   <div style="position: relative;">
    <p style="width: 100px;height: 30px;position: absolute; top: 20px; left: 80px; text-align: center; line-height: 30px; font-size: 1em; font-weight: bold;">部署设备总数</p>
     <div style="width: 30px;height: 30px;background-color:#87CEFF;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 50px;margin-top: 55px;">1</div>
     <div style="width: 30px;height: 30px;background-color:#87CEFF;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 2px;margin-top: 55px;">5</div>
     <div style="width: 30px;height: 30px;background-color: #87CEFF;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 2px;margin-top: 55px;">4</div>
     <div style="width: 30px;height: 30px;background-color:#87CEFF;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 2px;margin-top: 55px;">0</div>
     <div style="width: 30px;height: 30px;background-color: #87CEFF;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 2px;margin-top: 55px;">8</div>
     </div> 
     <div style="position: relative;">
    <p style="width: 120px;height: 30px;position: absolute; top: 20px; left: 292px; text-align: center; line-height: 30px; font-size: 1em; font-weight: bold;">设备今日总报警数</p>
     <div style="width: 30px;height: 30px;background-color:#9FB6CD;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 50px;margin-top: 55px;">0</div>
     <div style="width: 30px;height: 30px;background-color:#9FB6CD;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 2px;margin-top: 55px;">0</div>
     <div style="width: 30px;height: 30px;background-color: #9FB6CD;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 2px;margin-top: 55px;">0</div>
     <div style="width: 30px;height: 30px;background-color:#9FB6CD;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 2px;margin-top: 55px;">1</div>
     <div style="width: 30px;height: 30px;background-color:#9FB6CD;border-radius: 20%;float: left;text-align: center;line-height: 30px;border:1px;margin-left: 2px;margin-top: 55px;">7</div>
     </div>

     <div style="position: relative;">
       
         <li style="position: absolute;width: 200px;height: 30px;background:rgba(255, 255, 255, 0.2);border: 1px;top: 8.5em;left: 1em;box-shadow: 0 0 10px #f1f1f1;border-radius: 5%;">
            <span style="float: left;margin-left: 6px; margin-top: 4px;">今日烟感报警</span >
            <span style="float: right;margin-right: 6px;margin-top: 4px;">9 次</span>
        </li>
         <li style="position: absolute;width: 200px;height: 30px;background:rgba(255, 255, 255, 0.2);border: 1px;top: 12.5em;left: 1em;box-shadow: 0 0 10px #f1f1f1;border-radius: 5%;">
            <span style="float: left;margin-left: 6px; margin-top: 4px;">今日电气报警</span >
            <span style="float: right;margin-right: 6px;margin-top: 4px;">1 次</span>
        </li>
         <li style="position: absolute;width: 200px;height: 30px;background:rgba(255, 255, 255, 0.2);border: 1px;top: 16.5em;left: 1em;box-shadow: 0 0 10px #f1f1f1;border-radius: 5%;">
            <span style="float: left;margin-left: 6px; margin-top: 4px;">今日红外报警</span >
            <span style="float: right;margin-right: 6px;margin-top: 4px;">3 次</span>
        </li>
         <li style="position: absolute;width: 200px;height: 30px;background:rgba(255, 255, 255, 0.2);border: 1px;top: 8.5em;left: 18em;box-shadow: 0 0 10px #f1f1f1;border-radius: 5%;">
            <span style="float: left;margin-left: 6px; margin-top: 4px;">今日呼救报警</span >
            <span style="float: right;margin-right: 6px;margin-top: 4px;">2 次</span>
        </li>
         <li style="position: absolute;width: 200px;height: 30px;background:rgba(255, 255, 255, 0.2);border: 1px;top: 12.5em;left: 18em;box-shadow: 0 0 10px #f1f1f1;border-radius: 5%;">
            <span style="float: left;margin-left: 6px; margin-top: 4px;">今日燃气报警</span >
            <span style="float: right;margin-right: 6px;margin-top: 4px;">2次</span>
        </li>
     </div>
</div>
     <!-- 尚未处理的报警消息 -->
 <p style="width: 602px;position: absolute;color: white;font-size: 1.2em;font-weight: bold;height: 2em;background-color: #00BFFF;left: 67%;top: 31em;box-shadow: 0 0 10px #f1f1f1;border-bottom: 0;text-align: center;line-height: 2em;">尚未处理的报警信息</p>
<div style="text-align:center; position: absolute;overflow: hidden; box-shadow: 0 0 10px #f1f1f1;-webkit-tap-highlight-color: transparent;user-select: none;color: white;left: 67%;top:39.8em; width: 43em;height:21em;background:rgba(255, 255, 255, 0.1);">  
    <table id="table1">
            <thead>             
                    <th style="font-weight: bold;">报警类型 </th>
                    <th style="font-weight: bold;">报警设备类型 </th>
                    <th style="font-weight: bold;">报警设备型号</th>                   
                    <th style="font-weight: bold;">设备报警时间</th>
                    <th style="font-weight: bold;">操作</th>
            </thead>
            <tbody id="tbody1"> 
             <tr >
                 <td data-label="报警类型">烟感报警</td>
                <td data-label="报警设备类型">烟感</td>
                <td data-label="报警设备型号">2AEJ09734K</td>         
                <td data-label="设备报警时间">2016-03-15 12:25:56</td>
                <a href=""><td data-label="操作">查看</td></a>
            </tr>         
             <tr>
                 <td data-label="报警类型">紧急呼救</td>
                <td data-label="报警设备类型">烟感</td>
                <td data-label="报警设备型号">2AFG35UI</td>         
                <td data-label="设备报警时间">2015-04-01 17:44:12</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr>   
             <tr>
                <td data-label="报警类型">电气报警</td>
                <td data-label="报警设备类型">电气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-11-24 15:55:51</td>
                <a href=""><td data-label="操作">查看</td></a>
            </tr> 
            <tr>
                <td data-label="报警类型">燃气报警</td>
                <td data-label="报警设备类型">燃气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-06-19 08:46:16</td>
              <a href=""><td data-label="操作">查看</td></a>
            </tr>
            <tr>
                <td data-label="报警类型">电气报警</td>
                <td data-label="报警设备类型">电气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-11-24 23:56:37</td>
                <a href=""><td data-label="操作">查看</td></a>
            </tr> 
            <tr >
                 <td data-label="报警类型">烟感报警</td>
                <td data-label="报警设备类型">烟感</td>
                <td data-label="报警设备型号">2AEJ09734K</td>         
                <td data-label="设备报警时间">2016-03-15 12:25:56</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr>         
             <tr>
                 <td data-label="报警类型">紧急呼救</td>
                <td data-label="报警设备类型">烟感</td>
                <td data-label="报警设备型号">2AFG35UI</td>         
                <td data-label="设备报警时间">2015-04-01 17:44:12</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr>   
             <tr>
                <td data-label="报警类型">电气报警</td>
                <td data-label="报警设备类型">电气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-11-24 15:55:51</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr> 
            <tr>
                <td data-label="报警类型">燃气报警</td>
                <td data-label="报警设备类型">燃气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-06-19 08:46:16</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr>
            <tr>
                <td data-label="报警类型">电气报警</td>
                <td data-label="报警设备类型">电气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-11-24 23:56:37</td>
                <a href=""><td data-label="操作">查看</td></a>
            </tr> 
         
          <tr >
                 <td data-label="报警类型">烟感报警</td>
                <td data-label="报警设备类型">烟感</td>
                <td data-label="报警设备型号">2AEJ09734K</td>         
                <td data-label="设备报警时间">2016-03-15 12:25:56</td>
                <a href=""><td data-label="操作">查看</td></a>
            </tr>         
             <tr>
                 <td data-label="报警类型">紧急呼救</td>
                <td data-label="报警设备类型">烟感</td>
                <td data-label="报警设备型号">2AFG35UI</td>         
                <td data-label="设备报警时间">2015-04-01 17:44:12</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr>   
             <tr>
                <td data-label="报警类型">电气报警</td>
                <td data-label="报警设备类型">电气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-11-24 15:55:51</td>
                <a href=""><td data-label="操作">查看</td></a>
            </tr> 
            <tr>
                <td data-label="报警类型">燃气报警</td>
                <td data-label="报警设备类型">燃气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-06-19 08:46:16</td>
              <a href=""><td data-label="操作">查看</td></a>
            </tr>
            <tr>
                <td data-label="报警类型">电气报警</td>
                <td data-label="报警设备类型">电气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-11-24 23:56:37</td>
                <a href=""><td data-label="操作">查看</td></a>
            </tr> 
            <tr >
                 <td data-label="报警类型">烟感报警</td>
                <td data-label="报警设备类型">烟感</td>
                <td data-label="报警设备型号">2AEJ09734K</td>         
                <td data-label="设备报警时间">2016-03-15 12:25:56</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr>         
             <tr>
                 <td data-label="报警类型">紧急呼救</td>
                <td data-label="报警设备类型">烟感</td>
                <td data-label="报警设备型号">2AFG35UI</td>         
                <td data-label="设备报警时间">2015-04-01 17:44:12</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr>   
             <tr>
                <td data-label="报警类型">电气报警</td>
                <td data-label="报警设备类型">电气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-11-24 15:55:51</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr> 
            <tr>
                <td data-label="报警类型">燃气报警</td>
                <td data-label="报警设备类型">燃气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-06-19 08:46:16</td>
               <a href=""><td data-label="操作">查看</td></a>
            </tr>
            <tr>
                <td data-label="报警类型">电气报警</td>
                <td data-label="报警设备类型">电气</td>
                <td data-label="报警设备型号">2A3E55I</td>         
                <td data-label="设备报警时间">2017-11-24 23:56:37</td>
                <a href=""><td data-label="操作">查看</td></a>
            </tr>
           
             
             
            </tbody>
    </table>    
</div>
<!-- 图标 -->
<!-- background-color:#00BFFF; -->
<div id="ts" style="height:10%;width: 100%; position: absolute;top: 90.5%;background-color:#00BFFF;">
   <a href="#" class="tishi"><span style="font-size: 2em;position: absolute;text-align: center;width: 100%;height: 2em;line-height: 50px;color:#00BFFF;height: 50px;background:rgba(255, 255, 255, 0.1);top: -55%;">点击设备图标进入系统</span></a>
   <a href="/"><img src="/pc/terrace/images/yg.png"   title="点我进入系统管理"  style="width:  100px;height: 100px;float: left;margin-left: 16%;display: block; cursor:pointer" alt="" ></a>
    <a href="/"> <img src="/pc/terrace/images/dq.png" title="点我进入系统管理"  style="width:  100px;height:  100px;float: left;margin-left: 10%;display: block;cursor:pointer" alt="" ></a>
   <a href="/"><img src="/pc/terrace/images/hw.png"   title="点我进入系统管理"  style="width:  100px;height:  100px;float: left;margin-left: 10%;display: block;cursor:pointer" alt="" ></a>
    <a href="/"><img src="/pc/terrace/images/hj.png"  title="点我进入系统管理"  style="width:  100px;height:  100px;float: left;margin-left: 10%;display: block;cursor:pointer" alt="" ></a>
   <a href="/"><img src="/pc/terrace/images/rq.png"   title="点我进入系统管理"  style="width:   100px;height: 100px; float: left; margin-left: 10%;display: block;cursor:pointer" alt="" ></a>
</div>
</div>

</body>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="/pc/terrace/js/indexditu.js"></script>
<script type="text/javascript" src="/pc/terrace/js/indexa.js"></script>
<script type="text/javascript">  
   $(function(){
    //t=setTimeout("show()",1000);
    t=setInterval("show()",1000)
    $("#table1").mouseover(function(){
        //alert($("#table1 tr:first").children("td:first").text());
        //$("#table1 tr:first").appendTo($(this));
        clearInterval(t);
        //window.clearInterval(this.int)   
    }).mouseout(function(){
        t=setInterval("show()",1000);
        //window.setInterval('scroll2()',1000)
    })
    //window.setInterval('scroll2()',1000)
})
 
function show(){
    $("#table1 #tbody1 tr:first").appendTo($("#table1"));
    //alert('aaaa');
    //$("#table1 tr:first").appendTo($("#table1"));
    // $("#table1 tr:first").remove();
     
}
  
</script> 
</html>